<template>
  <div class="login">
      <div class="login-box">
        <h3 class="title">{{title}}</h3>
          <a-upload
            list-type="picture-card"
            :show-upload-list="false"
            :before-upload="_=>false"
            @change="handleChange"
          >
            <img style="width:80px;" :src="$http.baseURL+'/public/pic/'+imageUrl" alt="avatar" />
          </a-upload>
          <a-form :wrapperCol="{span: 12}" ref="ruleForm" :model="form" :rules="rules" @finish="handleSubmit">
            <a-form-item name="name">
              <a-input
                type="text"
                placeholder="请输入书名"
                v-model:value="form.name"
              >
                <template v-slot:prefix><BookOutlined /></template>
              </a-input>
            </a-form-item>
            <a-form-item name="author">
              <a-input
                type="text"
                v-model:value="form.author"
                placeholder="请输入作者"
              ><template v-slot:prefix><UserOutlined /></template></a-input>
            </a-form-item>
            <a-form-item name="introduction">
              <a-input
                type="text"
                v-model:value="form.introduction"
                placeholder="请输入简介"
              ><template v-slot:prefix><ProfileOutlined /></template></a-input>
            </a-form-item>
            <a-form-item name="price">
              <a-input
                type="text"
                v-model:value="form.price"
                placeholder="请输入价格"
              ><template v-slot:prefix><PayCircleOutlined /></template></a-input>
            </a-form-item>
            <a-form-item name="publisher">
              <a-input
                type="text"
                v-model:value="form.publisher"
                placeholder="请输入出版社"
              ><template v-slot:prefix><ReadOutlined /></template></a-input>
            </a-form-item>
            <a-form-item name="total">
              <a-input
                type="text"
                v-model:value="form.total"
                placeholder="请输入数量"
              ><template v-slot:prefix><DatabaseOutlined /></template></a-input>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit" :loading="isloading">提交</a-button>
            </a-form-item>
          </a-form>
      </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      title: '添加书籍',
      imageUrl: '1601790602704.png',
      form: {
        name: '',
        author: '',
        introduction: '',
        price: '',
        publisher: '',
        total: '',
      },
      rules:{
        name: [{ required: true, message: '请输入书名' }],
        author: [{ required: true, message: '请输入作者' }],
        introduction: [{ required: true, message: '请输入简介' }],
        price: [{ required: true, message: '请输入价格' }],
        publisher: [{ required: true, message: '请输入出版社' }],
        total: [{ required: true, message: '请输入数量' }],
      },
      isloading:false
    };
  },
  mounted(){
    var bookData = this.$root.bookData
    if(bookData){
      Object.assign(this.form, bookData)
      this.imageUrl = bookData.cover
      this.title = '修改书籍'
    }
  },
  beforeUnmount(){
    if(this.title === '修改书籍'){
      this.$root.bookData = null
    }
  },
  methods: {
    handleChange(file){
      var body = new FormData()
      body.append('file',file.file)
      fetch(this.$http.baseURL+'/upload',{method: 'POST',body,headers:{ token: localStorage.token }}).then(_=>_.json()).then(_=>{
        this.imageUrl=_.path
      })
    },
    handleSubmit(values) {
      if(!this.imageUrl){
        return this.$message.error('请上传封面')
      }
      this.isloading=true;
      values.cover = this.imageUrl
      if(this.title === '修改书籍'){
        values.id=this.$root.bookData.id
        this.updateFunc(values);
      }else{
        this.addFunc(values);
      }
    },
    updateFunc(values){
      this.$http.get("/update",values).then(res => {
        this.isloading=false;
        this.$message.success(`修改 ${values.name} 成功！`);
        this.$router.push('/')
      });
    },
    addFunc(values) {
      this.$http.get("/create",values).then(res => {
        this.isloading=false;
        this.$message.success(`添加 ${values.name} 成功！`);
        this.$router.push('/')
      });
    }
  }
};
</script>

<style scoped>
</style>
